import React, {Component} from 'react'

import {Text, Image, View, StyleSheet, FlatList, TouchableOpacity} from 'react-native'

import ajax from '../../utils/fetch'
import {GETRECOMENDLIST} from '../../const/shareUri'
import {scaleSize, setSpText} from '../../utils/SreenUtil'


export default class Home extends Component {
  static navigationOptions = {
    headerTitle: '择天说'
  }

  constructor(props) {
    super(props);

    //初始化状态
    this.state = {
      list: [],
      refreshing:false
    };
  }

  toDetail(url) {
    //alert(url);
    this.props.navigation.push('WebWiew', {url: url})
  }

  showListItem = ({item, index}) => {
    return (
        <TouchableOpacity key={index} activeOpacity={0.8} onPress={this.toDetail.bind(this, item.recommendShareUrl)}>
          <View style={styles.itemList}>
            <Image style={styles.image} source={{uri: item.recommendPagePic2}}/>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.subTitle}>{item.subTitle}</Text>
          </View>
        </TouchableOpacity>
    )
  }


  render() {
    return (
        <FlatList
            onEndReachedThreshold={0.5}
            refreshing={this.state.refreshing}
            onRefresh={this.requestData}
            renderItem={this.showListItem.bind(this)}
            data={this.state.list}>
        </FlatList>
    )
  }

  componentDidMount() {
    this.requestData();
  }

  requestData=()=>{
    this.setState({refreshing:true})
    this._getNewList()
  }

  _getNewList = () => {
    ajax.get(GETRECOMENDLIST, {}, res => {
      this.setState({refreshing:false});
      this.setState({list: res.data});
    });
  };
}

const styles = StyleSheet.create({
  itemList: {
    padding: scaleSize(28),
    borderBottomColor: '#d5d4d4',
    borderBottomWidth: 0.5,
    backgroundColor: '#fff'
  },
  image: {
    width: scaleSize(694),
    height: scaleSize(392),
    borderRadius: 5
  },
  title: {
    fontSize: setSpText(30),
    marginTop: scaleSize(26),
    marginBottom: scaleSize(10),
    color: '#323232',
    fontWeight: '500'
  },
  subtitle: {
    fontSize: setSpText(25),
    color: '#454545'
  }
})